<template>
  <div class="setting-container">
    <div class="divider">
      <span>{{ translate('元素设置') }}</span>
    </div>
    <div class="container">
      <el-form label-width="80" :model="widget">
        <el-form-item :label="translate('图片标识') + '：'">
          <el-input v-model="widget.alias" />
        </el-form-item>
        <el-form-item :label="translate('图片路径') + '：'">
          <el-input v-model="widget.src" />
        </el-form-item>
        <el-form-item :label="translate('图片') + '：'">
          <Upload
            :disabled="true"
            :image-url="widget.src"
            @success="uploadSuccess"
          />
        </el-form-item>
        <el-form-item :label="translate('宽度') + '：'">
          <el-input-number v-model="widget.width" :min="1" />
        </el-form-item>
        <el-form-item :label="translate('高度') + '：'">
          <el-input-number v-model="widget.height" :min="1" />
        </el-form-item>
        <el-form-item :label="translate('圆角') + '：'">
          <el-input-number v-model="widget.borderRaius" :min="0" />
        </el-form-item>
        <el-form-item :label="translate('x轴坐标') + '：'">
          <el-input-number v-model="widget.x" :min="0" />
        </el-form-item>
        <el-form-item :label="translate('y轴坐标') + '：'">
          <el-input-number v-model="widget.y" :min="0" />
        </el-form-item>
        <el-form-item :label="translate('层级') + '：'">
          <el-input-number v-model="widget.zIndex" :min="0" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useEleStore } from '@/store/modules/coms'
  import Upload from './upload.vue'
  import { translate } from '@/i18n'
  const Store = useEleStore()
  const { getCurrentWidget: widget } = storeToRefs(Store)
  const uploadSuccess = (url: string) => {
    console.log(url)
    widget.value.src = url
  }
</script>

<style lang="scss" scoped>
  .setting-container {
    .divider {
      position: relative;
      margin: 10px 0;
      font-weight: 700;
      font-size: 16px;
      color: #515a6e;

      span {
        position: relative;
        z-index: 2;
        padding: 0 4px;
        margin-left: 20px;
        background-color: #fff;
      }

      &:before {
        position: absolute;
        width: 100%;
        content: '';
        display: block;
        border-top: 1px solid #e8eaec;
        top: 50%;
        transform: translateY(50%);
        z-index: 1;
      }
    }

    .sketch-container {
      position: relative;
      .sketch {
        width: 40px;
        height: 20px;
        cursor: pointer;
        border: 1px solid;
      }

      .picker {
        position: absolute;
        z-index: 99;
        top: 28px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
</style>
